<template>
  <div class="v-flow-config-section">
    <div class="config-section-title">设置驳回指定节点</div>
    <el-switch
      v-model="form.isRejectNode"
      active-value="1"
      inactive-value="2"
      active-text="启用"
      inactive-text="停用"
    />
    <div v-if="form.isRejectNode === '1'">
      <el-select v-model="form.rejectNodeId" placeholder="请选择" style="width: 100%" filterable>
        <el-option
          v-for="item in nodeList"
          :key="item.nodeId"
          :label="`${item.name}：${item.nodeId}`"
          :value="item.nodeId"
        >
        </el-option>
      </el-select>
    </div>
  </div>
  <div class="v-flow-config-section">
    <div class="config-section-title">设置驳回表单</div>
    <el-switch
      v-model="form.enableRejectForm"
      active-value="1"
      inactive-value="2"
      active-text="启用"
      inactive-text="停用"
    />
    <el-alert
      show-icon
      title="启用之后，驳回审批时必须填写配置的表单内容"
      type="info"
      :closable="false"
    />
    <RejectFormTable
      v-show="form.enableRejectForm === '1'"
      ref="rejectFormTableRef"
      @update="updateRejectFormTable"
    />
  </div>
</template>

<script setup lang="ts">
import type { Properties, NodeItem } from '../../types'
const { getProperties, updateProperties } = inject<{
  getProperties: () => any
  updateProperties: (data: Properties) => void
}>('nodeConfig', {
  getProperties: () => {
    return {}
  },
  updateProperties: () => {}
})
const { flowList } = inject<{
  flowList: any
}>('flowTree', {
  flowList: []
})
const nodeList = computed(() => {
  return flowList.value.filter((el: NodeItem) => {
    return el.type == 1
  })
})
const rejectFormTableRef = ref<any>(null)
// 审批规则
const form = ref({
  enableRejectForm: '2', // 1是 2否
  rejectForms: [],
  rejectNodeId: '', // 驳回节点ID
  isRejectNode: '2' // 是否指定驳回节点ID 1是 2否
})
const updateRejectFormTable = () => {
  form.value.rejectForms = rejectFormTableRef.value?.getRejectForm()
}
watch(form, () => {
  const properties = getProperties()
  properties.enableRejectForm = form.value.enableRejectForm
  properties.rejectForms = form.value.rejectForms
  properties.rejectNodeId = form.value.rejectNodeId
  properties.isRejectNode = form.value.isRejectNode
  updateProperties(properties)
})
onMounted(() => {
  const properties = getProperties()
  form.value = properties
  rejectFormTableRef.value?.setRejectForm(properties.rejectForms)
})
</script>
